<template>
    <div class="app-container">
        <section class="title">
            <span>选择样式：</span>
            <i class="iconfont ali-Row" :class="{active: active === 0}" @click="checkTemp(0)"></i>
            <i class="iconfont ali-row" :class="{active: active === 1}" @click="checkTemp(1)"></i>
        </section>
        <!-- 模拟器 -->
        <section class="analog" v-loading="loading">
            <div class="phone">
                <!-- <phone :banners="banners" @open="open" :active="active"></phone> -->
                <phone  @open="open" :active="active"></phone>
            </div>
        </section>

        <transition enter-active-class="animated bounceInRight" leave-active-class="animated fadeOutRightBig">
            <div v-if="show" class="dialog">
                <i class="iconfont ali-close1" @click="show = false"></i>
                <!-- <temp :showIndex="showIndex" @initList="initList" @close="show = false"></temp> -->
                <temp :showIndex="showIndex"  @close="show = false"></temp>
            </div>
        </transition>
    </div>
</template>
<script>
import temp from './components/temp'
import phone from './components/phone'
import animate from 'animate.css'
import { labourbanner_listAll } from '@/api/labourbanner'
import { setTimeout } from 'timers';

export default {
    data() {
        return {
            loading: false,
            show: false,
            active: 0,
            banners: [],
            showIndex: 0
        }
    },
    components: { temp, phone },
    methods: {
        open(index) {
            this.showIndex = index;
            this.show = !this.show;
        },
        checkTemp(num) {
            this.active = num;
        },
        // async initList() {
        //     this.loading = true;
        //     const { data } = await labourbanner_listAll({ 
        //         company_id: localStorage.getItem("companyId") - 0,
        //         organization_id: sessionStorage.getItem("organization_id") - 0, 
        //      });
            
        //     if (data.status === 100) {
        //         this.loading = false;
        //         this.banners = data.data.rows;
        //     }
        // },
        parentCloseEvent() {
            this.$emit('closeTemp');
        },
    },
    created() {
        //  this.initList();
    }
}
</script>
<style lang="scss" scoped>
.title {
    display: flex;
    justify-content: flex-start;
span {
    font-size: 13px;
    color: #606266;
    font-weight: bold;
}
.ali-row,
.ali-Row {
    font-size: 20px;
    color: #909399;
    margin-left: 10px;
    cursor: pointer;
}
.active {
    color: #67c23a;
}
}
.analog {
    margin-top: 15px;
}
.dialog {
    position: fixed;
    z-index: 10;
    top: 10px;
    right: 0;
    border: 1px solid #DCDFE6;
    box-shadow: 0 0 5px #DCDFE6;
    border-radius: 5px 0 0 5px;
    background-color: #fff;
    .ali-close1 {
        font-size: 20px;
        cursor: pointer;
    }
}
</style>
